.w{
    width: 100px;
    height: 100px;
    background: crimson;
    transition: .3s;
}

.w:hover{
    animation: widthAndHeight 5s ease 1s infinite alternate;
}


/* 默认写法 当前所有稳定版本浏览器 */
@keyframes widthAndHeight{
    0%{
        width: 100px;
        height: 100px;
        transform: rotate(0deg);
    }50%{
        width: 200px;
        height: 200px;
        transform: rotate(180deg);
    }100%{
        width: 100px;
        height: 100px;
        transform: rotate(360deg);
    }
}

/* 欧朋浏览器 */
@-o-keyframes widthAndHeight{
    0%{
        width: 100px;
        height: 100px;
        transform: rotate(0deg);
    }50%{
        width: 200px;
        height: 200px;
        transform: rotate(180deg);
    }100%{
        width: 100px;
        height: 100px;
        transform: rotate(360deg);
    }
}

/* 谷歌 + safari(苹果自己的浏览器) */
@-webkit-keyframes widthAndHeight{
    0%{
        width: 100px;
        height: 100px;
        transform: rotate(0deg);
    }50%{
        width: 200px;
        height: 200px;
        transform: rotate(180deg);
    }100%{
        width: 100px;
        height: 100px;
        transform: rotate(360deg);
    }
}

/* 火狐 */
@-moz-keyframes widthAndHeight{
    0%{
        width: 100px;
        height: 100px;
        transform: rotate(0deg);
    }50%{
        width: 200px;
        height: 200px;
        transform: rotate(180deg);
    }100%{
        width: 100px;
        height: 100px;
        transform: rotate(360deg);
    }
}